<template>
  <el-dialog title="设置字段显示（可拖拽排序）" width="500" :visible.sync="isShowDialog" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true">
    <el-tree
      ref="tableFieldTree"
      :data="treeData"
      node-key="field"
      default-expand-all
      show-checkbox
      :default-checked-keys="defaultChecked"
      @check-change="handleCheckChange"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag">
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeSetting">取 消</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </div>
  </el-dialog>
</template>
<style scoped>
  .tool{display: flex;justify-content: space-between;}
  .tree-tool{padding-left:24px;padding-bottom:20px;}
</style>
<script>
export default {
  created(){
    
  },
  mounted(){
   
  },
  props:{
    gridField:{
      type:Array,
      default(){
        return []
      }
    },
    gridName:{
      type:String,
      default(){
        return ''
      }
    },
    controller:{
      type:String,
      default(){
        return ''
      }
    },
  },
  data(){
    return {
      isShowDialog:false,
      defaultChecked:[],
      treeData:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods:{
    init(){
      let tableFields = this.$store.getters.userSetting.datagridTable && this.$store.getters.userSetting.datagridTable[this.gridName] ? this.$store.getters.userSetting.datagridTable[this.gridName] : {};
      let fieldArr = [];
      this.gridField.forEach(item=>{
        if (!item.isTable) return;
        let field = {};
        field.field = item.field;
        if (item.isTable !== undefined) field.isTable = item.isTable;
        if (item.label !== undefined) field.label = item.label;
        if (item.tableIndex !== undefined) field.tableIndex = item.tableIndex;
        if (tableFields[item.field] && tableFields[item.field].tableIndex !== undefined) field.tableIndex = tableFields[item.field].tableIndex; 
        if (tableFields[item.field] && tableFields[item.field].isTable !== undefined) field.isTable = tableFields[item.field].isTable;
        if (field.tableAlias) field.field = field.tableAlias;
        fieldArr.push(field);
      });
      fieldArr.sort(function(a,b){
        if (!a.tableIndex) return true;
        if (!b.tableIndex) return false;
        return a.tableIndex - b.tableIndex;
      });
      this.treeData = [{field:'treeData',label:'全选',children:fieldArr}];
      this.setDefaultChecked();
      
    },
    setDefaultChecked(unitIndex){
      let checkedKeys = [];
      this.treeData[0].children.forEach(item=>{
        if (item.isTable)  checkedKeys.push(item.field);
      });
      this.$nextTick(()=>{
        this.$refs.tableFieldTree.setCheckedKeys(checkedKeys);
      });
    },
    submit(){
      let data = this.treeData[0].children;
      let tableIndex = 1;
      let result = {};
      let num = 0;
      data.forEach(item=>{
        item.tableIndex = tableIndex;
        result[item.field] = item;
        tableIndex++;
        if (item.isTable) num++;
      })
      if (num == 0) return this.$tool.errorToast('至少显示一个字段');
      this.$store.dispatch('permission/saveTableShowField',{gridName:this.gridName,data:result}).then(() => {
        this.$emit('saveTableShowField');
        this.closeSetting();
      })
    },
    handleCheckChange(data, checked, indeterminate) {
      data.isTable = checked; 
    },
    handleDragStart(node, ev) {
      //console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      if (draggingNode.data.isTable) {
        this.$refs.tableFieldTree.setChecked(draggingNode.data.field,draggingNode.data.isTable);
      }
    },
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
          if (draggingNode.parent.field === dropNode.parent.field) {
            // 向上拖拽 || 向下拖拽
            return type === "prev" || type === "next";
          }
        } else {
          // 不同级进行处理
          return false;
        }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf('全选') === -1;
    },
    openSetting(){
      this.isShowDialog = true;
      this.init();
    },
    closeSetting(){
      this.isShowDialog = false;
    }
  }
}


</script>